<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" :body-style="{ padding: '0px' }">
        <el-row style="height: 27px">
          <el-col>
            <span class="container">试题录入/编辑</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form
          ref="addTags"
          :model="formData"
          :rules="formRules"
          label-width="120px"
        >
          <el-row type="flex" style="width: 100%; height: 100%">
            <el-col>
              <!-- 学科 -->
              <el-form-item prop="subjectID" label="学科:">
                <el-select
                  @change="getCalalogList"
                  v-model="formData.subjectID"
                  style="width: 40%"
                >
                  <el-option
                    v-for="item in objectList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 目录 -->
              <el-form-item prop="catalogID" label="目录:">
                <el-select v-model="formData.catalogID" style="width: 40%">
                  <el-option
                    v-for="item in calalogList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 企业 -->
              <el-form-item prop="enterpriseID" label="企业:">
                <el-select v-model="formData.enterpriseID" style="width: 40%">
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :label="item.shortName"
                    :value="+item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 城市 -->
              <el-form-item prop="city" label="城市:">
                <el-select
                  @change="getCountyList"
                  v-model="formData.province"
                  style="width: 19%"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item"
                    :value="item + ''"
                  ></el-option>
                </el-select>
                <!-- 区县 -->
                <el-select
                  v-model="formData.city"
                  style="width: 19%"
                  class="cityStyle"
                >
                  <el-option
                    v-for="item in countyList"
                    :key="item.id"
                    :label="item"
                    :value="item + ''"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 方向 -->
              <el-form-item prop="direction" label="方向:">
                <el-select v-model="formData.direction" style="width: 40%">
                  <el-option
                    v-for="item in originList"
                    :key="item.id"
                    :label="item.direction"
                    :value="item.id + ''"
                    direction
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 题型 -->
              <el-form-item prop="questionType" label="题型:">
                <el-radio-group
                  v-model="formData.questionType"
                  @change="selectQuestionTypeFn"
                >
                  <el-radio label="1">单选</el-radio>
                  <el-radio label="2">多选</el-radio>
                  <el-radio label="3">简答</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 难度 -->
              <el-form-item prop="difficulty" label="难度:">
                <el-radio-group v-model="formData.difficulty">
                  <el-radio label="1">简单</el-radio>
                  <el-radio label="2">一般</el-radio>
                  <el-radio label="3">困难</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 题干-富文本 -->
              <el-form-item
                prop="question"
                class="editor"
                label="题干:"
                style="width: 98%; height: 250px"
              >
                <quill-editor
                  ref="QuillEditor"
                  :options="editorOption"
                  v-model="formData.question"
                  style="height: 200px"
                ></quill-editor>
              </el-form-item>
              <!-- 选项：单选 -->
              <el-form-item
                label="选项:"
                v-if="formData.questionType === '1'"
                v-show="formData.questionType !== '3'"
              >
                <el-radio-group v-model="radio" @change="radioSelectFn">
                  <div
                    class="radioItem"
                    v-for="(item, index) in formData.options"
                    :key="index"
                  >
                    <el-radio :label="item.code">{{ item.code }}</el-radio>
                    <el-input v-model="item.title"></el-input>
                    <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                    >
                      <i class="upoloadImg">上传图片</i>
                      <i class="el-icon-circle-close"></i>
                    </el-upload>
                  </div>

                  <el-button type="danger" disabled>+增加选项与按钮</el-button>
                </el-radio-group>
              </el-form-item>
              <!-- 选项：多选 -->
              <el-form-item
                label="选项:"
                v-else
                v-show="formData.questionType !== '3'"
              >
                <!-- <el-checkbox-group > -->
                <div
                  class="checkboxItem"
                  v-for="(item, index) in formData.options"
                  :key="index"
                >
                  <el-checkbox
                    v-model="item.isRight"
                    :label="item.code"
                  ></el-checkbox>
                  <el-input
                    type="text"
                    v-model="item.title"
                    class="checkboxInput"
                  ></el-input>
                  <el-upload
                    v-model="options.img"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                  >
                    <i class="checkboxImg">上传图片</i>
                    <i class="el-icon-circle-close"></i>
                  </el-upload>
                </div>
                <!-- </el-checkbox-group> -->
                <el-button type="danger" @click="addCheckbox()"
                  >+增加选项与按钮</el-button
                >
              </el-form-item>
              <!-- 解析视频 -->
              <el-form-item prop="videoURL" label="解析视频:">
                <el-input
                  v-model="formData.videoURL"
                  style="width: 40%"
                ></el-input>
              </el-form-item>
              <!-- 答案解析-富文本 -->
              <el-form-item
                prop="answer"
                class="editor"
                label="答案解析:"
                style="width: 98%; height: 250px"
              >
                <quill-editor
                  ref="QuillEditor"
                  :options="editorOption"
                  v-model="formData.answer"
                  style="height: 200px"
                ></quill-editor>
              </el-form-item>
              <!-- 题目备注 -->
              <el-form-item prop="remarks" label="题目备注:">
                <el-input
                  v-model="formData.remarks"
                  style="width: 40%"
                  type="textarea"
                ></el-input>
              </el-form-item>
              <!-- 试题标签 -->
              <el-form-item label="试题标签:">
                <el-select
                  style="width: 40%"
                  v-model="ids"
                  multiple
                  placeholder="请选择试题标签"
                >
                  <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value + ''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 提交TODO -->
              <el-form-item>
                <el-button @click="submit" type="primary">确认提交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 基础题库添加
import { add, detail, update } from '@/api/hmmm/questions'
// 标签
import { simple } from '@/api/hmmm/tags'
// 目录
import { simple as simpleDirectorys } from '@/api/hmmm/directorys'
// 方法
import { createAPI } from '@/utils/request'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// require styles 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // radio: 1, // 题型单选框
      // radio1: 4, // 难度单选框
      // radio3: '', // 单选框选项
      // checkList: [], // 复选框选项
      objectList: [], // 学科
      calalogList: [], // 目录
      tagsList: [], // 试题
      companyList: [], // 企业
      cityList: [], // 城市
      countyList: [], // 区县
      originList: [], // 方向
      ids: [],
      options: [
        {
          code: 'A', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          code: 'B', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          code: 'C', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          code: 'D', // 代码
          title: '', // 标题
          img: '' // 图片URL
        }
      ], // 复选框
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 区县
        direction: '', // 方向
        questionType: '1', // 题型单选框
        difficulty: '4', // 难度单选框
        question: '', // 题干
        answer: '', // 答案解析
        remarks: '', // 题目备注
        videoURL: '', // 解析视频
        options: [
          {
            isRight: false,
            code: 'A', // 代码
            title: '', // 标题
            img: '' // 图片URL
          },
          {
            isRight: false,
            code: 'B', // 代码
            title: '', // 标题
            img: '' // 图片URL
          },
          {
            isRight: false,
            code: 'C', // 代码
            title: '', // 标题
            img: '' // 图片URL
          },
          {
            isRight: false,
            code: 'D', // 代码
            title: '', // 标题
            img: '' // 图片URL
          }
        ], // 复选框
        tags: '' // 试题标签
      },
      radio: '',
      formRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入题干', trigger: 'blur' }]
      },
      // 设置
      editorOption: {
        modules: {
          // 工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块、链接、图片
          ]
        },
        placeholder: '',
        // 是否显示工具栏
        theme: 'snow'
      }
    }
  },
  created () {
    //
    this.getObjectList()
    this.getCompanyList()
    this.getCityList()
    this.getOriginList()
    this.$route.query.id && this.getDetailFn(this.$route.query.id)
  },
  methods: {
    getDetailFn (id) {
      detail({ id }).then(async (res) => {
        this.$set(this, 'formData', res.data)
        // console.log(this.formData.options, 'this.formData.options.find(item => item.isRight).code')
        this.formData.options.forEach(item => this.$set(item, 'isRight', !!item.isRight))
        this.radio = this.formData.options.find((item) => item.isRight).code
        await this.getCalalogList()

        const a = this.formData.tags.split(',')
        this.ids = a
        // 判断按钮
        // for (let i = 0; i <= a.length - 1; i++) {
        //   console.log(a[i])
        //   this.ids.push(this.tagsList.find(item => item.label === a[i]).value)
        // }
      })
    },
    // 提交
    async submit () {
      this.$refs.addTags.validate(async (valid) => {
        if (!valid) return
        // 添加请求
        if (this.formData.id) {
          await update({
            ...this.formData,
            tags: this.ids.toString()
          })
          this.$message.success('修改成功')
          this.$router.push('/questions/list')
        } else {
          await add({
            ...this.formData,
            tags: this.ids.toString()
          })
          this.$message.success('提交成功')
          this.$router.push('/questions/list')
        }
      })
    },
    selectQuestionTypeFn () {
      this.formData.options = [
        {
          isRight: false,
          code: 'A', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          isRight: false,
          code: 'B', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          isRight: false,
          code: 'C', // 代码
          title: '', // 标题
          img: '' // 图片URL
        },
        {
          isRight: false,
          code: 'D', // 代码
          title: '', // 标题
          img: '' // 图片URL
        }
      ]
    },
    radioSelectFn (select) {
      this.formData.options.forEach((item) => {
        if (item.code === select) {
          item.isRight = true
          return
        }
        item.isRight = false
      })
    },
    addCheckbox () {
      const a =
        this.formData.options[this.formData.options.length - 1].code.charCodeAt(0)
      // console.log(a, 'lsy')
      this.formData.options.push({
        isRight: false,
        code: String.fromCharCode(a + 1), // 代码
        title: '', // 标题
        img: '' // 图片URL
      })
      // this.num = String.fromCharCode()
      // console.log(this.num)
      // this.arr.push(this.num)
    },
    // 方向
    async getOriginList () {
      const res = await createAPI('/questions/choice', 'get')
      this.originList = res.data.items
    },
    // 区县
    async getCountyList (panme) {
      const res = await citys(panme)
      // console.log(res)
      this.countyList = res
    },
    // 城市
    async getCityList () {
      const res = await provinces()
      // console.log(res)
      this.cityList = res
    },
    // 企业
    async getCompanyList () {
      const res = await createAPI('/companys', 'get')
      // console.log(res)
      this.companyList = res.data.items
    },
    // 学科
    async getObjectList () {
      const res = await createAPI('/subjects/simple', 'get')
      // console.log(res.data, '888')
      this.objectList = res.data
      //
      this.objectId = this.objectList.value
    },
    // 根据学科 获取的目录&&获取试题标签
    async getCalalogList () {
      const res = await simpleDirectorys({
        subjectID: this.formData.subjectID
      })
      const res1 = await simple({
        subjectID: this.formData.subjectID
      })
      // console.log(res1, '123')
      this.calalogList = res.data
      this.tagsList = res1.data
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  padding: 18px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.editor {
  ::v-deep .el-form-item__error {
    top: 126% !important;
  }
}
.radioItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px;
  ::v-deep .el-upload--picture-card {
    width: 100px !important;
    height: 50px !important;
    margin: 0 10px;
  }

  .upoloadImg {
    font-size: 14px !important;
    position: absolute;
    top: -55%;
    left: 77%;
    z-index: 9999;
  }

  .el-icon-circle-close {
    position: absolute;
    font-size: 20px;
    top: -2%;
    right: 5px;
  }
}

.checkboxItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px;
  ::v-deep .el-upload--picture-card {
    width: 100px !important;
    height: 50px !important;
    margin: 0 -870px;
  }
  ::v-deep .el-input--medium .el-input__inner {
    width: 210px;
    margin: 0 30px;
  }

  .checkboxImg {
    font-size: 14px;
    position: absolute;
    top: -55%;
    left: 27%;
    z-index: 9999;
  }
  .el-icon-circle-close {
    position: absolute;
    font-size: 20px;
    top: -2%;
    left: 390px;
  }
}

.cityStyle {
  margin-left: 15px;
}
</style>
